<template>
  <div>
    <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>
    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <div class="hs-screen-row">
        <Input
          v-model="params.code"
          placeholder="订单编号"
          clearable
          style="width: 200px"
        />
      </div>
      <div class="hs-screen-row">
        <Select
          v-model="params.isAutoVerify"
          placeholder="可否手动核销"
          clearable
          style="width:200px"
        >
          <Option value="1">是</Option>
          <Option value="0">否</Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <Input
          v-model="params.username"
          placeholder="券名称"
          clearable
          style="width: 200px"
        />
      </div>
      <div class="hs-screen-row">
        <Select
          v-model="params.state"
          placeholder="状态"
          clearable
          style="width:200px"
        >
          <!-- 1.待核销  2.已核销  3.已失效  4.已完成  10、已过期 -->
          <Option value="1">待核销</Option>
          <Option value="2">已核销</Option>
          <Option value="3">已失效</Option>
          <Option value="4">已完成</Option>
          <Option value="10">已过期</Option>
        </Select>
      </div>

      <div class="hs-screen-row">
        <DatePicker
          @on-change="changeDate"
          v-model="dateInit"
          type="daterange"
          :editable="false"
          separator=" ~ "
          split-panels
          transfer
          placeholder="创建时间"
          style="width: 200px"
        ></DatePicker>
      </div>
      <div class="hs-screen-row">
        <Button type="primary" @click="findOrderMallList">查询</Button>
      </div>
      <div class="hs-screen-row">
        <Button @click="resetScreen">重置</Button>
      </div>
    </Card>

    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <!--标题-->
      <div slot="title">
        <div class="hs-screen-box">
          <div>订单列表</div>
          <div>
            <ButtonGroup>
              <Button @click="findOrderMallList">
                <Icon type="md-refresh" size="15" />
              </Button>
            </ButtonGroup>
          </div>
        </div>
      </div>

      <!--表格数据-->
      <Table
        :columns="columns"
        :data="data"
        size="small"
        :stripe="true"
        :loading="isTableLoading"
        @on-select="selectTable"
        @on-select-cancel="selectCancelTable"
        @on-select-all="selectAllTable"
        @on-select-all-cancel="selectAllCancelTable"
      >
        <template slot-scope="{ row }" slot="state">
          <!-- 1.待核销  2.已核销  3.已失效  4.已完成  10、已过期 -->
          <span v-if="row.state == 1">
            <Tag color="success">待核销</Tag>
          </span>
          <span v-if="row.state == 2">
            <Tag color="warning">已核销</Tag>
          </span>
          <span v-if="row.state == 3"><Tag color="primary">已失效</Tag></span>
          <span v-if="row.state == 4"><Tag color="default">已完成</Tag></span>
          <span v-if="row.state == 10"><Tag color="default">已过期</Tag></span>
        </template>
        <template slot="isautoverify" slot-scope="{ row }">
          <span>{{ row.isautoverify == 1 ? "是" : "否" }}</span>
        </template>

        <template slot-scope="{ row }" slot="totalFreight">
          <span>{{ row.totalFreight ? row.totalFreight : 0 }}</span>
        </template>

        <template slot-scope="{ row }" slot="balanceDeduction">
          <span>{{ row.balanceDeduction ? row.balanceDeduction : "-" }}</span>
        </template>

        <template slot-scope="{ row }" slot="payMethod">
          <span v-if="row.payMethod == 'alipay'">支付宝支付</span>
          <span v-if="row.payMethod == 'wechat'">微信支付</span>
          <span v-if="!row.payMethod">-</span>
        </template>

        <template slot-scope="{ row }" slot="payAmount">
          <span v-if="row.payAmount">{{ row.payAmount }}</span>
          <span v-else>-</span>
        </template>

        <template slot-scope="{ row }" slot="action">
          <Button
            type="success"
            size="small"
            style="margin-right: 5px"
            @click="showOrderOpe(row)"
            >查看
          </Button>
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            :disabled="row.isautoverify != 1 || row.state != 1"
            @click="verifyHandle(row)"
            >核销
          </Button>
          <Button
            type="warning"
            size="small"
            plain
            style="margin-right: 5px"
            :disabled="row.state != 2"
            @click="cancelHandle(row)"
            >撤销
          </Button>
        </template>
      </Table>
      <!--分页-->
      <div class="hs-page">
        <Page
          :total="total"
          show-sizer
          show-total
          transfer
          @on-change="changePage"
          @on-page-size-change="changePageSize"
        />
      </div>
    </Card>

    <!--显示模态框-->
    <order-ope ref="orderOpe"></order-ope>
  </div>
</template>

<script>
import hsBreadcrumb from "@/components/hs-breadcrumb";
import orderOpe from "./components/order-ope";
import { pickBy, identity } from "lodash";
import moment from "moment";
export default {
  name: "admin",
  data() {
    return {
      total: 0,
      importSuccess: 0,
      importFailed: 0,
      dateInit: "",
      isTableLoading: false,
      isShowImport: false,
      // 选中数据
      selectData: [],
      action: this.$apiURL + "/orderMall/importOrderExcel",
      headers: {
        token: JSON.parse(sessionStorage.getItem("J-TOKEN")).token,
      },
      // 参数
      params: {
        page: 1,
        rows: 10,
        mallOrderCode: "",
        state: "",
        nickName: "",
        username: "",
        consigneeName: "",
        consigneePhone: "",
        startTime: "",
        endTime: "",
        mallOrderIds: "",
        isAutoVerify: ''
      },
      // 表格列
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "商品名称",
          minWidth: 120,
          key: "goodsname",
        },
        {
          title: "店铺名称",
          minWidth: 120,
          key: "poiname",
        },
        {
          title: "订单ID",
          minWidth: 120,
          key: "voucherid",
        },
        {
          title: "快手订单ID",
          minWidth: 190,
          key: "ksorderid",
        },
        {
          title: "下单手机号",
          minWidth: 130,
          key: "maskphone",
        },
        {
          title: "金额",
          key: "payamount",
          minWidth: 50,
        },
        {
          title: "状态",
          minWidth: 120,
          slot: "state",
        },
        {
          title: "手动核销",
          slot: "isautoverify",
          minWidth: 60,
        },
        {
          title: "创建时间",
          minWidth: 120,
          key: "createtime",
        },
        {
          title: "操作",
          slot: "action",
          minWidth: 200,
          align: "center",
        },
      ],
      // 表格数据
      data: [],
      failOrderColumns: [
        {
          title: "订单编号",
          minWidth: 190,
          key: "orderCode",
        },
        {
          title: "订单标题",
          minWidth: 280,
          key: "orderTitle",
          ellipsis: true,
        },
      ],
      failOrderData: [],
      // 面包屑
      breadcrumb: [
        { name: "首页", url: "", icon: "ios-home-outline", size: 18 },
        { name: "商城", url: "", icon: "", size: 0 },
        { name: "团购订单", url: "", icon: "", size: 0 },
      ],
    };
  },
  created() {
    // 订单-列表查询
    this.findOrderMallList();
  },
  methods: {
    // 订单-列表查询
    findOrderMallList() {
      this.isTableLoading = true;
      this.axios
        .post("/voucher/v1/findList", pickBy(this.params, identity))
        .then((res) => {
          console.log(res);
          this.isTableLoading = false;
          if (res.status == 200) {
            this.total = res.data.total;
            this.data = res.data.rows.map((item) => ({
              ...item,
              createtime: moment(item.createtime).format("YYYY-MM-DD HH:mm:ss"),
            }));
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: "服务器内部错误",
              desc: "查询订单列表接口报错",
              duration: 0,
            });
          }
        });
    },
    // 是否取消订单
    isOrderCancel(row) {
      this.$Modal.confirm({
        title: `是否取消当前订单？`,
        onOk: () => {
          // this.$Message.info('您点击了确定.');
          this.orderCancel(row);
        },
        onCancel: () => {
          this.$Message.info("您点击了取消.");
        },
      });
    },
    // 是否删除订单
    isDeleteOrderMall(row) {
      // console.log(row)
      this.$Modal.confirm({
        title: `是否删除当前订单？`,
        onOk: () => {
          // this.$Message.info('您点击了确定.');
          this.deleteOrderMall(row);
        },
        onCancel: () => {
          this.$Message.info("您点击了取消.");
        },
      });
    },
    // 取消订单
    orderCancel(row) {
      this.$Spin.show();
      this.axios
        .post("/orderMall/orderCancel", {
          mallOrderId: row.mallOrderId,
        })
        .then((res) => {
          console.log(res);
          setTimeout(() => {
            this.$Spin.hide();
          }, 300);
          if (res.status == 200) {
            this.$Message.success("操作成功.");
            this.findOrderMallList();
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: "服务器内部错误",
              desc: "取消订单接口报错",
              duration: 0,
            });
          }
        });
    },
    // 删除订单
    deleteOrderMall(row) {
      this.$Spin.show();
      this.axios
        .post("/orderMall/deleteOrderMall", {
          mallOrderId: row.mallOrderId,
        })
        .then((res) => {
          console.log(res);
          setTimeout(() => {
            this.$Spin.hide();
          }, 300);
          if (res.status == 200) {
            this.$Message.success("操作成功.");
            this.findOrderMallList();
          }
          if (res.status == 201) {
            // this.$Message.error(res.msg);
            this.$Notice.error({
              title: "删除订单失败",
              desc: res.msg,
            });
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: "服务器内部错误",
              desc: "删除订单接口报错",
              duration: 0,
            });
          }
        });
    },
    // 显示操作模态框
    showOrderOpe(row) {
      this.$refs.orderOpe.show(row);
    },
    // 日期条件赋值
    changeDate(e) {
      this.params.startTime = e[0];
      this.params.endTime = e[1];
    },
    // 重置筛选条件
    resetScreen() {
      this.params.mallOrderCode = "";
      this.params.state = "";
      this.params.nickName = "";
      this.params.username = "";
      this.params.consigneeName = "";
      this.params.consigneePhone = "";
      this.params.startTime = "";
      this.params.endTime = "";
      this.params.code = ''
      this.params.isAutoVerify = ''
      this.params.mallOrderIds = ''
      this.dateInit = "";
    },
    // 改变页数
    changePage(e) {
      this.params.page = e;
      this.findOrderMallList();
    },
    // 改变页容量
    changePageSize(e) {
      this.params.rows = e;
      this.findOrderMallList();
    },
    // 在多选模式下有效，选中某一项时触发
    selectTable(selection, row) {
      this.selectData = selection;
    },
    // 在多选模式下有效，取消选中某一项时触发
    selectCancelTable(selection, row) {
      this.selectData = selection;
    },
    // 在多选模式下有效，点击全选时触发
    selectAllTable(selection) {
      this.selectData = selection;
    },
    // 在多选模式下有效，点击取消全选时触发
    selectAllCancelTable(selection) {
      this.selectData = selection;
    },
    verifyHandle(row) {
      this.axios
        .get("/voucher/v1/autoVerify", {
          params: { voucherId: row.voucherid },
        })
        .then((res) => {
          if (res.status != 200) {
            this.$Notice.error({
              title: "核销失败",
              desc: res.msg,
              duration: 3,
            });
          } else {
            this.$Notice.success({
              title: "核销成功",
              desc: "核销成功",
              duration: 3,
            });
            this.findOrderMallList();
          }
        });
    },
    cancelHandle(row) {
      this.axios
        .get("/voucher/v1/cancelVerify", {
          params: { id: row.voucherid },
        })
        .then((res) => {
          if (res.status != 200) {
            this.$Notice.error({
              title: "撤销失败",
              desc: res.msg,
              duration: 3,
            });
          } else {
            this.$Notice.success({
              title: "撤销成功",
              desc: "撤销成功",
              duration: 3,
            });
            this.findOrderMallList();
          }
        });
    },
  },
  components: {
    hsBreadcrumb,
    orderOpe,
  },
};
</script>

<style scoped lang="less">
.hs-upload-image-box {
  width: 485px;
  display: flex;
  align-items: center;
  justify-content: center;

  .hs-upload-add {
    cursor: pointer;
    width: 100%;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #cccccc;
    transition: all 0.3s;

    &:hover {
      color: #2d8cf0;
      border: 1px dashed #2d8cf0;
    }
  }
}
.z-import-message {
  margin: 10px 0;
}
</style>
